<template>
  <div class="learning-appointment-page">
    <!--学习&#45;&#45;活动预约-->
    <content-header :title="routeItem.title"></content-header>
    <div style="height:523px">
      <calendar class="event-calendar" :value="calendarValue" :disabled-days-of-week="calendar.disabled" :format="calendar.format"
        :placeholder="calendar.placeholder" :pane="1" :has-input="calendar.hasInput" :on-day-click="onDayClick" width="920px"
        :minDate="now" :rangeStatus="1" :changePane="changeMonth" lang="zh">
        <div v-for="(evt,index) in calendar.events" :slot="evt.lecturedate" :key="index">
          <div v-if="evt.infoList.length" class="events-wrap">
            <div class="event" v-for="(act,aindex) in evt.infoList" :key="`act-${aindex}`">
              {{act.title}}
            </div>
          </div>
          <img v-if="evt.infoList.length" class="arrow-right" src="@/assets/images/learning/arrow-right.png" alt="">
          <!-- <p v-if="evt.infoList.length && evt.lecturedate > now" class="totel"> 共 {{evt.infoList.length}} 场活动准备开始</p> -->
          <p v-if="evt.infoList.length && evt.lecturedate >= now" class="totel"> 共 {{evt.infoList.length}} 场活动</p>
          <p v-if="evt.infoList.length && evt.lecturedate < now" class="totel"> 已结束</p>
        </div>
      </calendar>
    </div>

    <div class="tab-header xui-margin-top-lg" style="padding:10px;">
      <div class="xui-margin-bottom-sm">
        <span class="xui-margin-right-xs">日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期:</span>
        <el-tag v-if="calendarValue" closable @close="clearCalendar" type="primary">
          {{calendarValue | parseTime}}
        </el-tag>
        <span v-else class="color-primary">全部</span>
      </div>
      <div>
        <span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
        <category-tabs :tabList="typeList" :tabIndex="typeIndex" @changeCategory="changeTypeTag"></category-tabs>
      </div>
      <div class="xui-margin-top-sm">
        <span>受众人群:</span>
        <category-tabs :tabList="crowdList" :tabIndex="crowdIndex" @changeCategory="changeCrowdTag"></category-tabs>
      </div>
    </div>
    <div class="list-wrap xui-fc xui-padding-vertical-md xui-grid-avg-2">
      <router-link :to="{name:'study-appointment-detail',params:{id:item.id}}" v-for="(item, index) in listData" :key="index" class="list xui-block">
        <img-box :imgSrc="item.imgUrl" width="452" height="260"></img-box>
        <div class="list__text xui-padding-sm">
          <h4 class="xui-text-truncate">{{item.title}}</h4>
          <div class="info">
            <div>
              <span class="color-yellow">活动时间：</span>
              <span class="color-darken-gray">{{item.startTime | parseDate('{y}年{m}月{d}日')}}</span> ~
              <span class="color-darken-gray">{{item.endTime | parseDate('{y}年{m}月{d}日')}}</span>
            </div>
            <div>
              <span class="color-yellow">报名时间：</span>
              <span class="color-darken-gray">{{item.signupstartTime | parseDate('{y}年{m}月{d}日')}}</span> ~
              <span class="color-darken-gray">{{item.signupendTime | parseDate('{y}年{m}月{d}日')}}</span>
            </div>
            <div>
              <span class="color-yellow">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点：</span>
              <span class="color-darken-gray">{{item.hall}}</span>
            </div>
          </div>
          <ul class="tags" v-if="item.tagNames">
            <li v-for="(item, index) in item.tagNames.split(',')" :key="`tag-${index}`">
              <span>{{item}}</span>
            </li>
          </ul>
        </div>
      </router-link>
    </div>

    <!-- 分页组件 -->
    <el-pagination background layout="prev, pager, next" :total="page.count" :page-size="page.size" class="xui-margin-top xui-text-center"
      @current-change="getActList" :current-page.sync="page.index">
    </el-pagination>
  </div>
</template>

<script>
  import ContentHeader from "../../../components/widge/content-header";
  import CategoryTabs from "@/components/widge/category-tabs/tab-bar";
  import imgBox from "@/components/widge/img-box";
  import {
    getActList,
    getActTag,
    getActListByMonth
  } from "@/api/act";
  import "vue2-slot-calendar/lib/calendar.min.css";
  import calendar from "vue2-slot-calendar/lib/calendar";
  import {
    parseTime
  } from "@/utils";

  export default {
    components: {
      ContentHeader,
      CategoryTabs,
      imgBox,
      calendar
    },
    data() {
      return {
        typeIndex: 0,
        typeName: "",
        crowdIndex: 0,
        currentMonth: 0,
        crowdName: "",
        typeList: [{
          index: 0,
          name: "全部"
        }],
        crowdList: [{
          index: 0,
          name: "全部"
        }],
        listData: [],
        calendarValue: "",
        calendar: {
          disabled: [],
          format: "yyyy-MM-dd",
          placeholder: "请选择日期",
          pane: "1",
          hasInput: false,
          events: []
        },
        page: {
          count: null,
          size: 10,
          index: 1
        }
      };
    },
    computed: {
      routeItem() {
        let routes = this.$store.getters.siteMap;
        let result;
        routes.forEach(route => {
          if (route.children) {
            route.children.forEach(child => {
              if (child.name == this.$route.name) {
                result = child;
              }
            });
          }
        });
        return result;
      },
      now() {
        return parseTime(new Date(), "{y}-{m}-{d}");
      }
    },
    methods: {
      onDayClick(day) {
        // console.log("day=", day);
        this.calendarValue = day;
        if (this.currentMonth != day.getMonth()) {
          getActListByMonth(day).then(res => {
            this.calendar.events = res.data;
          });
        }
        this.currentMonth = day.getMonth();
      },
      getActList(date) {
        let time = parseTime(this.calendarValue, "{y}-{m}-{d}");
        getActList(time, this.page.index, this.typeName, this.crowdIndex).then(
          res => {
            this.listData = res.data.recordsList;
            this.page.count = res.data.count;
          }
        );
      },
      getActListByMonth(time) {
        getActListByMonth(time).then(res => {
          this.calendar.events = res.data;
        });
      },
      changeMonth(year, month) {
        // console.log(year, month);
        let _year = year;
        let _month = Number(month);
        let date = new Date();
        date.setFullYear(_year, _month);
        getActListByMonth(date).then(res => {
          this.calendar.events = res.data;
        });
      },
      getActTag() {
        getActTag().then(res => {
          res.data[0].forEach(item => {
            let i = {};
            i.name = item.menuName;
            i.index = item.id;
            this.typeList.push(i);
          });
          res.data[1].forEach(item => {
            let i = {};
            i.name = item.menuName;
            i.index = item.id;
            this.crowdList.push(i);
          });
        });
      },
      changeTypeTag(item) {
        this.typeIndex = Number(item.index);
        this.typeName = item.name;
      },
      changeCrowdTag(item) {
        this.crowdIndex = Number(item.index);
        this.crowdName = item.name;
      },
      clearCalendar() {
        this.calendarValue = "";
      }
    },
    mounted() {
      this.getActList();
      this.getActTag();
      this.getActListByMonth(new Date());
      this.$nextTick(() => {
        document.getElementsByClassName(
            "glyphicon glyphicon-chevron-left"
          )[0].className +=
          " el-icon-arrow-left";
        document.getElementsByClassName(
            "glyphicon glyphicon-chevron-right"
          )[0].className +=
          " el-icon-arrow-right";
      });
    },
    filters: {
      parseTime: function (value) {
        return parseTime(value, "{y}-{m}-{d}");
      },
      parseDate: function (value, pattern) {
        let date = new Date();
        let arr = value.split("-");
        date.setFullYear(Number(arr[0]), Number(arr[1]) - 1, Number(arr[2]));
        return parseTime(date, pattern);
      }
    },
    watch: {
      calendarValue: function (value) {
        this.getActList();
      },
      typeIndex: function () {
        this.getActList();
      },
      crowdIndex: function () {
        this.getActList();
      }
    }
  };

</script>

<style lang="less">
  .learning-appointment-page {
    .datepicker-dateRange-item-active,
    .datepicker-dateRange-item-active:hover {
      background: #d3af68 !important;
      color: #fff !important;
    }
    .event-calendar {
      .datepicker-popup {
        box-shadow: none;
        border: none;
        border-radius: 0;
      }
      .datepicker-ctrl {
        position: absolute;
        top: 15px;
        width: 100%;
        padding: 0 200px;
        margin-top: 3px;
        .el-icon-arrow-left {
          left: 370px;
        }
        .el-icon-arrow-right {
          right: 370px;
        }
      }
      .datepicker-weekRange {
        height: 40px;
        span {
          width: 118px;
          height: 60px;
          margin: 5px;
        }
      }
      .datepicker-inner {
        width: 920px;
      }
      .datepicker-body {
        background: #f5f5f5;
        >p {
          line-height: 40px;
        }
        .day-cell {
          width: 118px;
          height: 60px;
          margin: 5px;
          vertical-align: top;
          position: relative;
          border-radius: 4px;
          background: #fff;
          >div {
            font-size: 16px;
          }
        }
        .day-cell:hover .events-wrap {
          display: block;
        }
        .day-cell:hover .arrow-right {
          display: block;
        }
        .day-cell.datepicker-dateRange-item-active:hover .events-wrap {
          display: none;
        }
        .day-cell.datepicker-dateRange-item-active:hover .arrow-right {
          display: none;
        }
        .events-wrap {
          position: absolute;
          right: 118px;
          top: 0;
          display: none;
          background: #d3af68;
          width: 256px;
          min-height: 60px;
          max-height: 200px;
          overflow-y: hidden;
          z-index: 10;
          padding: 15px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
          .event {
            color: #fff;
            font-size: 13px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 18px;
          }
        }
        .arrow-right {
          position: absolute;
          left: 0;
          top: 10px;
          width: 7px;
          height: 10px;
          display: none;
        }
        .totel {
          font-size: 12px;
          line-height: 20px;
          margin: 0;
          color: #bf9c51;
        }
        .datepicker-monthRange span {
          width: 100px;
          height: 100px;
          vertical-align: middle;
          line-height: 100px; // font-weight: 600;
        }
      }
    }
    .datepicker-dateRange-item-active {
      .event {
        color: #fff !important;
      }
      .totel {
        color: #fff !important;
      }
    }
    .tab-header .category-tabs {
      display: inline-block;
    }

    .list-wrap {
      .list {
        position: relative;
        width: 454px;
        height: 380px;
        border: 1px solid #ebebeb;
        margin: 0 22px 20px 0;
        transition: border-color 0.2s;
        .tags {
          position: absolute;
          top: 10px;
          right: 10px;
          li {
            display: inline-block;
            width: 56px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background-color: #bf9c51;
            color: #fff;
            margin-right: 10px;
          }
        }
      }
      .list:hover {
        border-color: #c39844;
      }
    }
    .list:nth-child(2n) {
      margin-right: 0;
    }
    .list__img {
      width: 252px;
      height: 136px;
      a {
        display: block;
      }
    }
    .list__text {
      h4 {
        color: #2c2c2c;
        margin-bottom: 5px;
      }
      p {
        color: #6d4d38;
        font-size: 12px;
        font-family: "宋体";
      }
    }
    .info {
      span {
        font-size: 14px;
      }
    }
    .color-yellow {
      color: #c39844;
    }
  }

</style>
